<template>
    <div>
    <a-modal :title="seaAccountForm.title" :width="1000" :visible="seaAccountForm.visible" @ok="handleSeaNext" okText="下一步" @cancel="seaAccountForm.visible=false" >
        <a-row>
            <a-col :span="12">
                <form-create v-model="seaAccountForm.fApi" :rule="seaAccountForm.rule" :option="seaAccountForm.option" @btn-select-change="findCompanyInfo"/>
            </a-col>
            <a-col :span="12">
                <img src="@/assets/bank.png" style="width: 400px;">
            </a-col>
        </a-row>
    </a-modal>
    <a-modal :title="seaAccountNextForm.title" :width="1000" :confirmLoading="submitLoading" :visible="seaAccountNextForm.visible" @ok="handleSeaSubmit" cancelText="上一步" @cancel="handleSeaClose">
        <form-create v-model="seaAccountNextForm.fApi" :rule="seaAccountNextForm.rule" :option="seaAccountNextForm.option" @btn-radio-change="radioSwit"/>
    </a-modal>
    </div>
</template>
<script>
import {
  FORM_SEA_ENTERPRISE_PARK,
  FORM_SEA_ENTERPRISE_PARK_OTHER,
  OPTION_BLOCK,
  OPTION_INLINE,
} from './form'
import { 
  SysGetEnterpriseIdInfo
} from '@/api/manage/enterprise'
import { 
    sysGetParkIdInfo 
} from '@/api/manage/park'
import { 
  sysAddEnterpriseParkSeaOpenAccount
} from '@/api/manage/openAccount'

export default {
    name: 'SeaAccount',
    data () {
        return {
            currentTab:0,
            form:{
                relationId:'',
                type:'',
                detail:{}
            },
            seaAccountForm:{
                title:'渤海开户',
                visible:false,
                fApi:{},
                rule:[],
                option:OPTION_BLOCK
            },
            seaAccountNextForm:{
                title:'渤海开户资料',
                visible:false,
                fApi:{},
                rule:[],
                option:OPTION_BLOCK
            },
            submitLoading:false
        }
    },
    methods:{
        add(type,selectArr){
            this.seaAccountForm.rule = FORM_SEA_ENTERPRISE_PARK;
            this.$nextTick(()=>{
                const name = type === 3 ? '企业名称':'园区名称';
                this.seaAccountForm.fApi.updateRules({'name':{title:name}});
                this.seaAccountForm.fApi.updateRules({'name':{options:selectArr}});
                this.seaAccountForm.fApi.resetFields();
            });
            this.form.type = type === 3 ? 1:2;
            this.seaAccountForm.visible = true;
        },
        async findCompanyInfo(id){
           const {data} = this.form.type === 1 ? await SysGetEnterpriseIdInfo(id) : await sysGetParkIdInfo(id);
           this.form.relationId = id;
           this.form.detail = data;
           var values = this.seaAccountForm.fApi.model();
           for(var keys in data){
               if(values[keys]){
                   values[keys] = data[keys];
               }
           }
           this.seaAccountForm.fApi.setValue(values);
        },
        handleSeaClose(){
            this.seaAccountForm.visible = true;
            this.seaAccountNextForm.visible = false;
        },
        async handleSeaNext(){
             var values = this.seaAccountForm.fApi.model();
             if(!values.name.value){
                const texts = this.form.type === 1 ? '请选择企业':'请选择园区';
                return this.$message.error(texts)
             }
            this.seaAccountForm.visible = false;
            this.seaAccountNextForm.rule = FORM_SEA_ENTERPRISE_PARK_OTHER;
            this.$nextTick(()=>{
                this.seaAccountNextForm.fApi.resetFields();
                this.seaAccountNextForm.fApi.hidden(false,'bankCard');
                this.seaAccountNextForm.fApi.hidden(false,'accountName');
                this.seaAccountNextForm.fApi.hidden(false,'bankTypeOther');
                this.seaAccountNextForm.fApi.hidden(false,'bankNameOther');
                var values = this.seaAccountNextForm.fApi.form;
                const data = this.form.detail;
                Object.assign(values,data);
                this.seaAccountNextForm.fApi.setValue(values);
            })
            this.seaAccountNextForm.visible = true;
        },
        radioSwit(e){
            if(e.target.value === 1){
                this.seaAccountNextForm.fApi.hidden(true,'bankCard');
                this.seaAccountNextForm.fApi.hidden(true,'accountName');
                this.seaAccountNextForm.fApi.hidden(true,'bankTypeOther');
                this.seaAccountNextForm.fApi.hidden(true,'bankNameOther');
            }else{
                this.seaAccountNextForm.fApi.hidden(false,'bankCard');
                this.seaAccountNextForm.fApi.hidden(false,'accountName');
                this.seaAccountNextForm.fApi.hidden(false,'bankTypeOther');
                this.seaAccountNextForm.fApi.hidden(false,'bankNameOther');
            }
        },
        handleSeaSubmit(){
            this.seaAccountNextForm.fApi.submit(async (formData, $f) => {
                try {
                    let params = {};
                    params.relationId = this.form.relationId;
                    params.type = this.form.type;
                    params.bankNum = formData.bankNum;
                    params.isBhAccount = formData.isBhAccount;
                    params.email = formData.email;
                    params.postcode = formData.postcodeOther;
                    params.bankType = formData.bankTypeOther;
                    params.bankName = formData.bankNameOther;
                     this.submitLoading = true;
                    const {code} = await sysAddEnterpriseParkSeaOpenAccount(params);
                    this.submitLoading = false;
                    if(code === '1'){
                        this.$message.success('开户成功');
                        this.seaAccountNextForm.visible = false;
                        this.$emit("on-ok");
                    }
                } catch (error) {
                    this.$message.info(JSON.stringify(error));
                }
            })
        },
    }
}
</script>